<template>
  <div class="video-conference">
    <h2>视频会议</h2>
    <p>高效沟通，随时随地开展会议</p>
    <div class="main-container">
      <div class="left-section">
        <QuickMeetingCard />
        <RecentMeetingsCard />
      </div>
      <div class="right-section">
        <MeetingSettingsCard />
<!--        <MeetingStatsCard />-->
      </div>
    </div>
  </div>
</template>

<script>
import QuickMeetingCard from '@/components/meeting/QuickMeetingCard'
import RecentMeetingsCard from '@/components/meeting/RecentMeetingsCard'
import MeetingSettingsCard from '@/components/meeting/MeetingSettingsCard'
import MeetingStatsCard from '@/components/meeting/MeetingStatsCard'

export default {
  name: 'Meeting',
  components: {
    QuickMeetingCard,
    RecentMeetingsCard,
    MeetingSettingsCard,
    MeetingStatsCard
  }
}
</script>

<style lang="less" scoped>
.video-conference {
  padding: 10px 24px;
  background-color: #f5f7fa;
  min-height: 100vh;
  box-sizing: border-box;

  h2{
    font-size: 38px;
    margin: 0;
  }

  p{
    font-size: 16px;
    color: #86909c;
    margin-top: 5px ;
  }
}

.main-container {
  display: flex;
  gap: 20px;
  margin-top: 24px;

  .left-section {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .right-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
}
</style>
